<script setup lang="ts">
import { ref } from "vue"
import Name from "./components/name.vue"
import Employee from "./components/employee.vue"
import UploadFiles from "./components/uploadFiles.vue"
import Start from "./components/start.vue"

const trainId = ref("")
const state = ref(0)
const changState = function (value: { state: number; id: string }) {
  if (value.state) {
    state.value = value.state
  }
  if (value.id) {
    trainId.value = value.id
  }
}
</script>

<template>
  <Name v-if="state == 0" @chang-state="changState" />
  <Employee v-if="state == 1" :id="trainId" @chang-state="changState" />
  <UploadFiles v-if="state == 2" :id="trainId" @chang-state="changState" />
  <Start v-if="state == 3" :id="trainId" @chang-state="changState"></Start>
</template>

<style scoped></style>
